import 'package:flutter/material.dart';
import 'package:flutter_hx/router/app_pages.dart';
import 'package:flutter_hx/services/app_theme_services.dart';
import 'package:flutter_hx/services/user_service.dart';
import 'package:intl/intl.dart';
import '../../../base/utils/density_util.dart';
import '../../../widgets/custom_widgets.dart';
import 'package:flutter_easyrefresh/easy_refresh.dart';
import 'package:get/get.dart';
import 'me_logic.dart';

class MePage extends StatelessWidget {
  const MePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final meLogic = Get.put(MeLogic());
    return EasyRefresh.custom(
      header: ClassicalHeader(),
      onRefresh: () async => UserService.to.refreshUser(),
      slivers: [
        SliverPersistentHeader(delegate: _userInfoHeaderDelegate(meLogic)),
        SliverPersistentHeader(delegate: _pmBannerHeaderDelegate()),
        SliverPersistentHeader(delegate: _orderHeaderDelegate()),
        SliverPersistentHeader(delegate: _userAccountHeaderDelegate()),
        SliverPersistentHeader(delegate: _mainFunctionHeaderDelegate()),
        SliverPersistentHeader(delegate: _coreFunctionHeaderDelegate())
      ],
    );
  }

  ///用户信息
  SliverPersistentHeaderDelegate _userInfoHeaderDelegate(MeLogic logic) {
    return BaseSliverPersistentHeaderDelegate(
        contentBuild: (_) => Obx(() => Stack(
              children: [
                Positioned(
                    top: 0,
                    bottom: 88,
                    right: 0,
                    left: 0,
                    child: Container(
                      padding: EdgeInsets.only(
                          left: 23, top: Density.instance.appBarHeight),
                      alignment: Alignment.topCenter,
                      decoration: const BoxDecoration(
                          image: DecorationImage(
                              image: AssetImage("assets/images/me_user_bg.png"),
                              fit: BoxFit.fill)),
                      child: !UserService.to.isLogin.value
                          ? GestureDetector(
                              onTap: () => Get.toNamed(Routes.login),
                              behavior: HitTestBehavior.opaque,
                              child: Row(
                                children: [
                                  const CircularImageWidget(
                                    url: "",
                                    width: 71,
                                    height: 71,
                                  ),
                                  const SizedBox(width: 12.5),
                                  Text("登录/注册",
                                      style: AppThemeServices
                                          .to.appTheme.textTheme.h18
                                          .copyWith(
                                              fontWeight: FontWeight.bold,
                                              color: Colors.black))
                                ],
                              ))
                          : GestureDetector(
                              onTap: () => UserService.to.logOut(),
                              child: Row(
                                children: [
                                  const CircularImageWidget(
                                    url: "",
                                    width: 71,
                                    height: 71,
                                  ),
                                  const SizedBox(width: 12.5),
                                  Text("一个橘子君",
                                      style: AppThemeServices
                                          .to.appTheme.textTheme.h18
                                          .copyWith(
                                              fontWeight: FontWeight.bold,
                                              color: Colors.black))
                                ],
                              ),
                            ),
                    )),
                Positioned(
                    left: 0,
                    right: 0,
                    bottom: 0,
                    child: Column(
                      children: [
                        Container(
                          padding: const EdgeInsets.symmetric(
                              horizontal: 15, vertical: 9),
                          margin: const EdgeInsets.symmetric(horizontal: 10),
                          decoration: const BoxDecoration(
                              gradient: LinearGradient(colors: [
                                Color.fromRGBO(255, 220, 167, 1),
                                Color.fromRGBO(255, 236, 208, 1)
                              ]),
                              borderRadius: BorderRadius.only(
                                  topRight: Radius.circular(7.5),
                                  topLeft: Radius.circular(7.5))),
                          child: Row(
                            children: [
                              Expanded(
                                  child: Row(
                                children: [
                                  Image.asset("assets/images/icon_me_vip.png",
                                      width: 15.5,
                                      height: 14,
                                      fit: BoxFit.fill),
                                  const SizedBox(width: 7),
                                  Text("VIP权益享受中",
                                      style: AppThemeServices
                                          .to.appTheme.textTheme.h14
                                          .copyWith(
                                              color: const Color.fromRGBO(
                                                  139, 78, 51, 1),
                                              fontWeight: FontWeight.bold))
                                ],
                              )),
                              GestureDetector(
                                onTap: () {
                                  // CityPicker.show(context:Get.context!, cityPickerListener: logic);
                                },
                                behavior: HitTestBehavior.opaque,
                                child: Container(
                                    padding: const EdgeInsets.symmetric(
                                        horizontal: 6.5, vertical: 2.5),
                                    decoration: BoxDecoration(
                                        color: const Color.fromRGBO(
                                            180, 109, 58, 1),
                                        borderRadius:
                                            BorderRadius.circular(45)),
                                    child: Text("查看权益",
                                        style: AppThemeServices
                                            .to.appTheme.textTheme.h10
                                            .copyWith(color: Colors.white))),
                              )
                            ],
                          ),
                        ),
                        Container(
                          padding: const EdgeInsets.symmetric(vertical: 15),
                          margin: const EdgeInsets.symmetric(horizontal: 10),
                          decoration: const BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.only(
                                  bottomRight: Radius.circular(7.5),
                                  bottomLeft: Radius.circular(7.5))),
                          child: Row(
                            children: [
                              //我的余额
                              Expanded(
                                  child: GestureDetector(
                                onTap: () =>
                                    Get.toNamed(Routes.account, arguments: 1),
                                behavior: HitTestBehavior.opaque,
                                child: Row(
                                  children: [
                                    Expanded(
                                        child: Column(
                                      mainAxisAlignment:
                                          MainAxisAlignment.center,
                                      children: [
                                        Text(
                                            "${UserService.to.user.value?.assets.balance ?? "---"}",
                                            style: AppThemeServices
                                                .to.appTheme.textTheme.h18
                                                .copyWith(
                                                    color: AppThemeServices
                                                        .to
                                                        .appTheme
                                                        .appColors
                                                        .primarilyTextColor,
                                                    fontWeight:
                                                        FontWeight.bold)),
                                        const SizedBox(height: 15),
                                        Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.center,
                                          crossAxisAlignment:
                                              CrossAxisAlignment.center,
                                          children: [
                                            Text("我的余额",
                                                style: AppThemeServices
                                                    .to.appTheme.textTheme.h10
                                                    .copyWith(
                                                        color: AppThemeServices
                                                            .to
                                                            .appTheme
                                                            .appColors
                                                            .primarilyTextColor)),
                                            const SizedBox(width: 5),
                                            Image.asset(
                                                "assets/images/icon_arrow_right.png"),
                                          ],
                                        )
                                      ],
                                    ))
                                  ],
                                ),
                              )),
                              //流通积分
                              Expanded(
                                  child: GestureDetector(
                                      onTap: () => Get.toNamed(Routes.account,
                                          arguments: 3),
                                      behavior: HitTestBehavior.opaque,
                                      child: Column(
                                        mainAxisAlignment:
                                            MainAxisAlignment.center,
                                        children: [
                                          Text(
                                              "${UserService.to.user.value?.assets.ticket ?? "---"}",
                                              style: AppThemeServices
                                                  .to.appTheme.textTheme.h18
                                                  .copyWith(
                                                      color: AppThemeServices
                                                          .to
                                                          .appTheme
                                                          .appColors
                                                          .primarilyTextColor,
                                                      fontWeight:
                                                          FontWeight.bold)),
                                          const SizedBox(height: 15),
                                          Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.center,
                                            children: [
                                              Text("我的酒票",
                                                  style: AppThemeServices
                                                      .to.appTheme.textTheme.h10
                                                      .copyWith(
                                                          color: AppThemeServices
                                                              .to
                                                              .appTheme
                                                              .appColors
                                                              .primarilyTextColor)),
                                              const SizedBox(width: 5),
                                              Image.asset(
                                                  "assets/images/icon_arrow_right.png")
                                            ],
                                          )
                                        ],
                                      ))),
                              //我的酒贝
                              Expanded(
                                  child: GestureDetector(
                                      onTap: () => Get.toNamed(Routes.account,
                                          arguments: 2),
                                      behavior: HitTestBehavior.opaque,
                                      child: Column(
                                        mainAxisAlignment:
                                            MainAxisAlignment.center,
                                        children: [
                                          Text(
                                              "${UserService.to.user.value?.assets.integral ?? "---"}",
                                              style: AppThemeServices
                                                  .to.appTheme.textTheme.h18
                                                  .copyWith(
                                                      color: AppThemeServices
                                                          .to
                                                          .appTheme
                                                          .appColors
                                                          .primarilyTextColor,
                                                      fontWeight:
                                                          FontWeight.bold)),
                                          const SizedBox(height: 15),
                                          Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.center,
                                            children: [
                                              Text("我的酒贝",
                                                  style: AppThemeServices
                                                      .to.appTheme.textTheme.h10
                                                      .copyWith(
                                                          color: AppThemeServices
                                                              .to
                                                              .appTheme
                                                              .appColors
                                                              .primarilyTextColor)),
                                              const SizedBox(width: 5),
                                              Image.asset(
                                                  "assets/images/icon_arrow_right.png")
                                            ],
                                          )
                                        ],
                                      )))
                            ],
                          ),
                        ),
                      ],
                    ))
              ],
            )),
        maxExtent: 271);
  }

  ///拍品
  SliverPersistentHeaderDelegate _pmBannerHeaderDelegate() {
    return BaseSliverPersistentHeaderDelegate(
        contentBuild: (_) => GestureDetector(
              onTap: () => Get.toNamed(Routes.auction),
              child: Container(
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(7.5),
                    color: Colors.white),
                height: 56.5,
                margin: const EdgeInsets.only(
                    left: 10, right: 10, bottom: 10, top: 10),
                padding: const EdgeInsets.only(left: 15, right: 21.5),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Image.asset("assets/images/icon_me_pm_text.png",
                            width: 63, height: 15),
                        const SizedBox(height: 5),
                        Text("拍卖商品在这里查看哦～",
                            style: AppThemeServices.to.appTheme.textTheme.h10
                                .copyWith(
                                    color: AppThemeServices
                                        .to.appTheme.appColors.hintTextColor))
                      ],
                    ),
                    Image.asset(
                      "assets/images/icon_me_pm_logo.png",
                      height: 56.5,
                      fit: BoxFit.fill,
                    )
                  ],
                ),
              ),
            ),
        maxExtent: 76.5);
  }

  ///订单页面
  SliverPersistentHeaderDelegate _orderHeaderDelegate() {
    return BaseSliverPersistentHeaderDelegate(
        contentBuild: (_) => Container(
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(7.5),
                  color: Colors.white),
              margin: const EdgeInsets.only(
                  left: 10, right: 10, bottom: 10, top: 0),
              padding: const EdgeInsets.only(
                  left: 15, right: 15, top: 10, bottom: 15),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text("订单管理",
                          style: AppThemeServices.to.appTheme.textTheme.h15
                              .copyWith(
                                  fontWeight: FontWeight.bold,
                                  color: Colors.black)),
                      Row(
                        children: [
                          Text("全部订单",
                              style: AppThemeServices.to.appTheme.textTheme.h12
                                  .copyWith(
                                      color: AppThemeServices.to.appTheme
                                          .appColors.hintTextColor)),
                          const SizedBox(width: 3),
                          Image.asset("assets/images/icon_arrow_right.png")
                        ],
                      )
                    ],
                  ),
                  const SizedBox(height: 22.5),
                  Row(
                    children: [
                      Expanded(
                          child: _orderStatusButton(
                              statusName: "全部",
                              icon: "assets/images/icon_me_order_all.png",
                              onTap: () => {})),
                      Expanded(
                          child: _orderStatusButton(
                              statusName: "待付款",
                              icon: "assets/images/icon_me_order_pay.png",
                              onTap: () => {})),
                      Expanded(
                          child: _orderStatusButton(
                              statusName: "待发货",
                              icon: "assets/images/icon_me_order_send.png",
                              onTap: () => {})),
                      Expanded(
                          child: _orderStatusButton(
                              statusName: "待收货",
                              icon: "assets/images/icon_me_order_confirm.png",
                              onTap: () => {})),
                      Expanded(
                          child: _orderStatusButton(
                              statusName: "已完成",
                              icon: "assets/images/icon_me_order_finish.png",
                              onTap: () => {}))
                    ],
                  )
                ],
              ),
            ),
        maxExtent: 125);
  }

  ///佣金面板
  SliverPersistentHeaderDelegate _userAccountHeaderDelegate() {
    return BaseSliverPersistentHeaderDelegate(
        contentBuild: (_) => Container(
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(7.5),
                  color: Colors.white),
              margin: const EdgeInsets.only(
                  left: 10, right: 10, bottom: 10, top: 0),
              padding: const EdgeInsets.only(
                  left: 15, right: 15, top: 10, bottom: 15),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text("我的佣金",
                          style: AppThemeServices.to.appTheme.textTheme.h15
                              .copyWith(
                                  fontWeight: FontWeight.bold,
                                  color: Colors.black)),
                      Row(
                        children: [
                          Text("佣金明细",
                              style: AppThemeServices.to.appTheme.textTheme.h12
                                  .copyWith(
                                      color: AppThemeServices.to.appTheme
                                          .appColors.hintTextColor)),
                          const SizedBox(width: 3),
                          Image.asset("assets/images/icon_arrow_right.png")
                        ],
                      )
                    ],
                  ),
                  const SizedBox(height: 22.5),
                  Row(
                    children: [
                      Expanded(
                          child: _accountNumberWidget(
                              amount: 0.00,
                              amountName: "今日佣金",
                              onTap: () => {})),
                      Expanded(
                          child: _accountNumberWidget(
                              amount: 0.00,
                              amountName: "昨日佣金",
                              onTap: () => {})),
                      Expanded(
                          child: _accountNumberWidget(
                              amount: 0.00,
                              amountName: "累计佣金",
                              onTap: () => {})),
                    ],
                  )
                ],
              ),
            ),
        maxExtent: 125);
  }

  ///常用功能区
  SliverPersistentHeaderDelegate _mainFunctionHeaderDelegate() {
    return BaseSliverPersistentHeaderDelegate(
        contentBuild: (_) => Container(
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(7.5),
                  color: Colors.white),
              margin: const EdgeInsets.only(
                  left: 10, right: 10, bottom: 10, top: 0),
              padding: const EdgeInsets.only(
                  left: 15, right: 15, top: 10, bottom: 15),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text("常用功能",
                      style: AppThemeServices.textTheme.h15
                          .bold()
                          .copyWith(color: Colors.black)),
                  const SizedBox(height: 15),
                  Row(children: [
                    Expanded(
                        child: _orderStatusButton(
                            statusName: "我要加盟",
                            icon: "assets/images/icon_me_join.png",
                            onTap: () => {})),
                    Expanded(
                        child: _orderStatusButton(
                            statusName: "签到中心",
                            icon: "assets/images/icon_me_sing.png",
                            onTap: () => {Get.toNamed(Routes.checkIn)})),
                    Expanded(
                        child: _orderStatusButton(
                            statusName: "我的团队",
                            icon: "assets/images/icon_me_team.png",
                            onTap: () => Get.toNamed(Routes.meTeam))),
                    Expanded(
                        child: _orderStatusButton(
                            statusName: "银行卡管理",
                            icon: "assets/images/icon_me_bank.png",
                            onTap: () => {}))
                  ])
                ],
              ),
            ),
        maxExtent: 145);
  }

  ///核心功能区
  SliverPersistentHeaderDelegate _coreFunctionHeaderDelegate() {
    return BaseSliverPersistentHeaderDelegate(
        contentBuild: (_) => Container(
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(7.5),
                  color: Colors.white),
              margin: const EdgeInsets.only(
                  left: 10, right: 10, bottom: 10, top: 0),
              padding: const EdgeInsets.only(
                  left: 15, right: 15, top: 10, bottom: 15),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text("必备功能",
                      style: AppThemeServices.textTheme.h15
                          .bold()
                          .copyWith(color: Colors.black)),
                  const SizedBox(height: 15),
                  Row(children: [
                    Expanded(
                        child: _orderStatusButton(
                            statusName: "地址管理",
                            icon: "assets/images/icon_address.png",
                            onTap: () => Get.toNamed(Routes.addressList))),
                    Expanded(
                        child: _orderStatusButton(
                            statusName: "我的二维码",
                            icon: "assets/images/icon_qr_code.png",
                            onTap: () => Get.toNamed(Routes.share))),
                    Expanded(
                        child: _orderStatusButton(
                            statusName: "设置",
                            icon: "assets/images/icon_setting.png",
                            onTap: () => Get.toNamed(Routes.setting))),
                    const Expanded(child: SizedBox())
                  ])
                ],
              ),
            ),
        maxExtent: 125);
  }

  Widget _orderStatusButton(
      {required String statusName,
      required String icon,
      required Function() onTap}) {
    return GestureDetector(
      onTap: onTap,
      behavior: HitTestBehavior.opaque,
      child: Column(
        children: [
          Image.asset(icon, gaplessPlayback: true),
          const SizedBox(height: 5.5),
          Text(
            statusName,
            style: AppThemeServices.textTheme.h10
                .copyWith(color: AppThemeServices.appColors.primarilyTextColor),
          )
        ],
      ),
    );
  }

  Widget _accountNumberWidget(
      {required double amount,
      required String amountName,
      required Function() onTap}) {
    return GestureDetector(
      onTap: onTap,
      behavior: HitTestBehavior.opaque,
      child: Column(
        children: [
          Text(NumberFormat("#0.00").format(amount),
              style: AppThemeServices.textTheme.h16.bold().copyWith(
                  color: AppThemeServices.appColors.primarilyTextColor)),
          const SizedBox(height: 7),
          Text(
            amountName,
            style: AppThemeServices.textTheme.h12
                .copyWith(color: AppThemeServices.appColors.primarilyTextColor),
          )
        ],
      ),
    );
  }
}
